{{> document-top}}

<div class="demos">

  <div class="demos-single-header">
    <div class="demos-single-header-container">
      <a class="demos-single-header-icon demos-single-header-icon-{{category.directory}}" href="{{&path.href}}{{category.directory}}">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="86.9px" height="100px" viewBox="0 0 86.9 100" enable-background="new 0 0 86.9 100" xml:space="preserve">
          <path d="M0,28.2c0-2,1.4-4.6,3.2-5.6l37-21.8c1.8-1,4.6-1,6.4,0l37,21.8c1.8,1,3.2,3.6,3.2,5.6v43.7c0,2-1.4,4.6-3.2,5.6l-37,21.8
          c-1.8,1-4.6,1-6.4,0l-37-21.8c-1.8-1-3.2-3.6-3.2-5.6V28.2z"/>
        </svg>
      </a>
      <h1>{{title}}</h1>
      <p>
        {{description}}
      </p>
    </div>
  </div>

  <div class="demo-single">

    <div class="demo-nav">
      <div class="demo-back">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="61.1px" height="100px" viewBox="31.7 11.5 61.1 100" style="enable-background:new 31.7 11.5 61.1 100;" xml:space="preserve">
          <path d="M89.6,14.7c4.3,4.3,4.3,11.3,0,15.5L58.4,61.5l31.2,31.2c4.3,4.3,4.3,11.3,0,15.5c-4.3,4.3-11.3,4.3-15.7,0l-39-39
          c-4.3-4.3-4.3-11.3,0-15.5l39.1-39C78.3,10.4,85.3,10.4,89.6,14.7z"/>
        </svg>
        <a href="{{&path.href}}">Back to Demos</a>
      </div>
      <div class="demo-meta">
        <div class="demo-license">
          License: <strong>{{license}}</strong>
        </div>
        <div class="demo-version">
          Player Version: <strong id="demo-player-version"></strong>
        </div>
        {{#author}}
          <div class="demo-author">
            Author: <strong>{{name}}</strong>
            {{#githubUsername}}
              <span>| <a href="http://github.com/{{githubUsername}}">GitHub</a></span>
            {{/githubUsername}}
            {{#email}}
              <span>| <a href="mailto:{{email}}">Email</a></span>
            {{/email}}
          </div>
        {{/author}}
      </div>
      <div class="demo-source-code">
        <a href="//github.com/jwplayer/jwdeveloper-demos/tree/master/demos/{{category.directory}}/{{directory}}">Source Code</a>
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="97.5px" viewBox="0 0 100 97.5" enable-background="new 0 0 100 97.5" xml:space="preserve">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M50,0C22.4,0,0,22.4,0,50c0,22.1,14.3,40.8,34.2,47.4
          	c2.5,0.5,3.4-1.1,3.4-2.4c0-1.2,0-4.3-0.1-8.5c-13.9,3-16.8-6.7-16.8-6.7c-2.3-5.8-5.6-7.3-5.6-7.3c-4.5-3.1,0.3-3,0.3-3
          	c5,0.4,7.7,5.2,7.7,5.2c4.5,7.6,11.7,5.4,14.6,4.2c0.5-3.2,1.7-5.4,3.2-6.7c-11.1-1.3-22.8-5.6-22.8-24.7c0-5.5,1.9-9.9,5.1-13.4
          	c-0.5-1.3-2.2-6.3,0.5-13.2c0,0,4.2-1.3,13.7,5.1c4-1.1,8.3-1.7,12.5-1.7c4.2,0,8.5,0.6,12.5,1.7c9.5-6.5,13.7-5.1,13.7-5.1
          	c2.7,6.9,1,12,0.5,13.2c3.2,3.5,5.1,8,5.1,13.4c0,19.2-11.7,23.4-22.8,24.7c1.8,1.5,3.4,4.6,3.4,9.3c0,6.7-0.1,12.1-0.1,13.7
          	c0,1.3,0.9,2.9,3.4,2.4C85.7,90.8,100,72.1,100,50C100,22.4,77.6,0,50,0z"/>
        </svg>
      </div>
    </div>

    {{#isApiCalls}}
      <div class="demo-api-reference">
        <div class="demo-api-reference-link">
          <a href="/jw-player/docs/developer-guide/api/javascript_api_reference/">API Reference</a>
        </div>
        <div class="demo-api-calls-label">
          This demo includes:
        </div>
        <ul class="demo-api-calls">
          {{#apiCalls}}
            <li><code>{{.}}</code></li>
          {{/apiCalls}}
        </ul>
      </div>
    {{/isApiCalls}}

    <div class="demo-container">

      <div class="demo-layout-{{layout}}">
        <div class="demo-layout-content">
          {{{html}}}
        </div>
        {{#showCode}}
          <div class="demo-layout-code">
            <pre><code class="html">&lt;script type=&quot;text/javascript&quot;&gt;{{js}}&lt;/script&gt;</code></pre>
          </div>
        {{/showCode}}
      </div>

      <div class="demo-disclaimer">
        Please Note: This player implementation is a Proof of Concept only provided to show the possibilities of the JW Player and Platform and should not be taken as an offer to create, edit or maintain custom integration or development.
      </div>

    </div>

  </div>

</div>

{{> document-bottom}}
